<template>
  <div class="demo">
    <div class="demo-title">自定义字段</div>
    <div class="demo-content">
      <TreeSelect
        v-model:value="value"
        show-search
        style="width: 100%"
        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
        placeholder="Please select"
        allow-clear
        tree-default-expand-all
        :tree-data="treeData"
        :field-names="{
          children: 'children',
          label: 'name',
          value: 'value',
        }"
        tree-node-filter-prop="name"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import TreeSelect from '@sscd/tree-select';
  import type { TreeSelectProps } from '@sscd/tree-select';
  const value = ref<string>();
  watch(
    () => value,
    () => console.log(value.value)
  );
  const treeData = ref<TreeSelectProps['treeData']>([
    {
      name: 'parent 1',
      value: 'parent 1',
      children: [
        {
          name: 'parent 1-0',
          value: 'parent 1-0',
          children: [
            { name: 'my leaf', value: 'leaf1' },
            { name: 'your leaf', value: 'leaf2' },
          ],
        },
        { name: 'ssc', value: 'ssc' },
      ],
    },
  ]);
</script>
